<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付宝当面付（个人版）</title>
    <meta name="description" content="alipay支付宝当面付">
    <meta name="keywords" content="支付宝当面付,支付宝.当面付,alipay,f2fpay,支付,个人支付,微信支付,支付测试,支付个人版">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: linear-gradient(135deg, #f7f7fa 0%, #e9ecef 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            color: #1677ff;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .nav-links {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .nav-links a {
            color: #1677ff;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 20px;
            background: rgba(22, 119, 255, 0.1);
            transition: all 0.3s ease;
        }

        .nav-links a:hover {
            background: rgba(22, 119, 255, 0.2);
            transform: translateY(-2px);
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .order-section, .payment-section {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-size: 20px;
            color: #1677ff;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .status-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .status-tab {
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            background: #f5f5f5;
            color: #666;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .status-tab.active {
            background: #1677ff;
            color: white;
        }

        .order-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            border-left: 4px solid #1677ff;
        }

        .order-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .order-amount {
            font-size: 18px;
            font-weight: bold;
            color: #1677ff;
        }

        .order-status {
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: bold;
        }

        .status-success {
            background: #f6ffed;
            color: #52c41a;
        }

        .status-waiting {
            background: #fff7e6;
            color: #fa8c16;
        }

        .status-closed {
            background: #fff2f0;
            color: #ff4d4f;
        }

        .create-order-btn {
            background: linear-gradient(135deg, #1677ff, #4096ff);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-top: 20px;
        }

        .create-order-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(22, 119, 255, 0.3);
        }

        .order-form {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: 500;
        }

        .form-group input, .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus, .form-group textarea:focus {
            outline: none;
            border-color: #1677ff;
            box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .submit-btn {
            background: linear-gradient(135deg, #52c41a, #73d13d);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(82, 196, 26, 0.3);
        }

        .order-time {
            color: #999;
            font-size: 12px;
        }

        .payment-info {
            text-align: center;
            margin-bottom: 30px;
        }

        .payment-amount {
            font-size: 32px;
            font-weight: bold;
            color: #1677ff;
            margin-bottom: 10px;
        }

        .payment-status {
            font-size: 16px;
            color: #666;
            margin-bottom: 20px;
        }

        .qr-code-section {
            text-align: center;
            margin-bottom: 30px;
        }

        .qr-code {
            width: 200px;
            height: 200px;
            background: #f5f5f5;
            border-radius: 10px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #999;
            border: 2px dashed #ddd;
        }

        .countdown {
            background: #fff7e6;
            border: 1px solid #ffd591;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .countdown-title {
            color: #fa8c16;
            font-weight: bold;
            margin-bottom: 5px;
            text-align: center;
        }

        .countdown-time {
            font-size: 18px;
            color: #d46b08;
            font-weight: bold;
        }

        .payment-method {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }

        .payment-method h3 {
            color: #1677ff;
            margin-bottom: 10px;
        }

        .payment-method p {
            color: #666;
            line-height: 1.6;
        }

        .footer {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .footer p {
            color: #666;
            margin-bottom: 10px;
        }

        /* 二维码弹窗样式 */
        .qr-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }

        /* 消息提醒样式 */
        .message-toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            border-radius: 12px;
            padding: 16px 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            border-left: 4px solid #1677ff;
            z-index: 2000;
            transform: translateX(400px);
            transition: transform 0.3s ease;
            max-width: 350px;
            backdrop-filter: blur(10px);
        }

        .message-toast.show {
            transform: translateX(0);
        }

        .message-toast.success {
            border-left-color: #52c41a;
        }

        .message-toast.warning {
            border-left-color: #fa8c16;
        }

        .message-toast.error {
            border-left-color: #ff4d4f;
        }

        .message-toast.info {
            border-left-color: #1677ff;
        }

        .message-content {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .message-icon {
            font-size: 20px;
            margin-top: 2px;
        }

        .message-text {
            flex: 1;
            color: #333;
            font-size: 14px;
            line-height: 1.5;
        }

        .message-close {
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
            font-size: 16px;
            padding: 0;
            margin-left: 8px;
            transition: color 0.3s ease;
        }

        .message-close:hover {
            color: #666;
        }

        .qr-modal.show {
            display: flex;
        }

        .qr-modal-content {
            background: white;
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 400px;
            width: 90%;
            position: relative;
            animation: modalSlideIn 0.3s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .qr-modal-title {
            font-size: 20px;
            color: #1677ff;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .qr-modal-amount {
            font-size: 28px;
            color: #1677ff;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .qr-modal-qr {
            width: 200px;
            height: 200px;
            background: #f5f5f5;
            border-radius: 15px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #999;
            border: 2px dashed #ddd;
            position: relative;
        }

        .qr-modal-timer {
            background: #fff7e6;
            border: 1px solid #ffd591;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 20px;
            color: #fa8c16;
            font-weight: bold;
        }

        .qr-modal-close {
            position: absolute;
            top: 15px;
            right: 20px;
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .qr-modal-close:hover {
            background: #f5f5f5;
            color: #666;
        }

        .qr-modal-tip {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }

            .nav-links {
                flex-direction: column;
            }

            .qr-modal-content {
                padding: 20px;
                margin: 20px;
            }
        }
        body {
            scrollbar-width: none;
            scrollbar-color: transparent transparent;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 头部 -->
    <div class="header">
        <h1>支付宝当面付（个人版）</h1>
        <div class="nav-links">
            <a href="#">接入文档</a>
            <a href="#">技术支持、业务合作联系我</a>
            <a href="#">扫一扫二维码，加我微信</a>
            <a href="#">手机H5支付-体验版</a>
            <a href="#">我的博客</a>
            <a href="#">我的CSDN</a>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
        <!-- 订单列表 -->
        <div class="order-section">
            <h2 class="section-title">📋 订单列表</h2>

            <div class="status-tabs">
                <button class="status-tab active">全部</button>
                <button class="status-tab">支付成功</button>
                <button class="status-tab">等待支付</button>
{{--                <button class="status-tab">交易完结</button>--}}
                <button class="status-tab">交易关闭</button>
            </div>

            <div id="orderList" style="height: 500px;overflow: scroll;">
                <div class="order-item">
                    <div class="order-info">
                        <span class="order-amount">¥50.00</span>
                        <span class="order-status status-success">支付成功</span>
                    </div>
                    <div style="color: #666; font-size: 14px;">
                        用户 user@example.com 在 2024-01-15 14:30:25 完成订单支付!
                    </div>
                    <div class="order-time">备注：测试订单</div>
                </div>

                <div class="order-item">
                    <div class="order-info">
                        <span class="order-amount">¥25.00</span>
                        <span class="order-status status-waiting">等待支付</span>
                    </div>
                    <div style="color: #666; font-size: 14px;">
                        订单创建时间: 2024-01-15 14:25:10
                    </div>
                    <div class="order-time">备注：示例订单</div>
                </div>
            </div>
        </div>

        <!-- 支付区域 -->
        <div class="payment-section">
            <h2 class="section-title">💳 支付详情</h2>
            <!-- 创建订单表单 -->
            <div class="order-form" id="orderForm">
                <h3 style="color: #1677ff; margin-bottom: 15px;">创建新订单</h3>
                <div class="form-row">
                    <div class="form-group">
                        <label for="orderAmount">订单金额 (¥)</label>
                        <input type="number" id="orderAmount" placeholder="请输入订单金额" min="1" step="0.01" required>
                    </div>
                    <div class="form-group">
                        <label for="orderEmail">邮箱地址</label>
                        <input type="email" id="orderEmail" placeholder="请输入邮箱地址" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="orderRemark">订单备注</label>
                    <textarea id="orderRemark" placeholder="请输入订单备注（可选）" rows="3"></textarea>
                </div>
                <button type="submit" class="submit-btn">提交订单</button>
            </div>

            <!-- 支付信息区域（初始隐藏） -->
            <div id="paymentInfo" style="display: none;">
                <div class="payment-info">
                    <div class="payment-amount" id="paymentAmount">¥0.00</div>
                    <div class="payment-status" id="paymentStatus">订单状态：等待支付</div>
                </div>

                <div class="countdown">
                    <div class="countdown-title">扫码支付，请在 5 分钟内打开支付宝扫一扫完成支付</div>
{{--                    <div class="countdown-time" id="countdown">300s</div>--}}
                </div>

                <div class="qr-code-section">
                    <div class="qr-code">
                        支付宝二维码<br>请使用支付宝扫一扫
                    </div>
                    <div class="payment-method">
                        <img src="/qrcodes/alipay.jpg" height="50" alt="">
                        <p>打开支付宝扫一扫，即可进行扫码支付哦</p>
                    </div>
                </div>

                <div style="display:none;background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 10px; padding: 15px; margin-top: 20px;">
                    <div style="color: #52c41a; font-weight: bold; margin-bottom: 5px;">💡 提示</div>
                    <div style="color: #666; font-size: 14px;">
                        支付金额>=5，您的邮箱将会接收到代码文件<br>
                        支付完成后会收到邮件通知，感谢您的支持
                    </div>
                </div>

                <button type="button" class="create-order-btn" id="newOrderBtn" style="margin-top: 20px;">
                    重新创建订单
                </button>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
{{--        <p>订单状态：{{ orderInfo.orderTradeState || 'WAIT_BUYER_PAY' }}</p>--}}
{{--        <p>{{ orderInfo.buyerLogonId }} 在 {{ orderInfo.paymentTime }} 完成订单支付!</p>--}}
{{--        <p>扫码支付，请在 5 分钟（{{ payDialog.timeout }} s）内完成支付</p>--}}
    </div>
</div>

<!-- 二维码弹窗 -->
<div class="qr-modal" id="qrModal">
    <div class="qr-modal-content">
        <button class="qr-modal-close" id="qrModalClose">&times;</button>
        <div class="qr-modal-title">扫码支付</div>
        <div class="qr-modal-amount" id="qrModalAmount">¥0.00</div>
        <div class="qr-modal-qr">
            支付宝二维码<br>请使用支付宝扫一扫
        </div>
        <div class="qr-modal-timer">扫码支付，请在 <span id="qrModalTimer">60s</span> 内完成支付</div>

        <img src="/qrcodes/alipay.jpg" height="50" alt="">
        <div class="qr-modal-tip">
            请使用支付宝扫一扫完成支付<br>
            支付完成后会收到邮件通知
        </div>
    </div>
</div>

<!-- 消息提醒容器 -->
<div id="messageContainer"></div>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    // 倒计时功能
    // let timeLeft = 300; // 5分钟 = 300秒
    // const countdownElement = document.getElementById('countdown');
    //
    // function updateCountdown() {
    //     const minutes = Math.floor(timeLeft / 60);
    //     const seconds = timeLeft % 60;
    //     countdownElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
    //
    //     if (timeLeft <= 0) {
    //         countdownElement.textContent = '支付超时';
    //         return;
    //     }
    //
    //     timeLeft--;
    //     setTimeout(updateCountdown, 1000);
    // }

    // updateCountdown();

    // 订单数据存储

    //发起ajax 请求到 后台
    let orders = [];

    orders = [
        {
            id: 1,
            amount: 50.00,
            email: 'user@example.com',
            remark: '测试订单',
            status: 'success',
            createTime: '2024-01-15 14:25:10',
            payTime: '2024-01-15 14:30:25'
        },
        {
            id: 2,
            amount: 25.00,
            email: 'test@example.com',
            remark: '示例订单',
            status: 'waiting',
            createTime: '2024-01-15 14:25:10',
            payTime: null
        },
    ];

    $.ajax({
        type: 'POST',
        url: '/api/order/list',
        data: { _token: '{{csrf_token()}}'},
        dataType: 'json',
        async: false,
        success: function(data) {
            if(data.status){
                orders = data.data;
            }else {
                showMessage(data.msg, 'error');
            }
        },
    })



    // 渲染订单列表
    function renderOrders(filterStatus = 'all') {
        const orderList = document.getElementById('orderList');
        const filteredOrders = filterStatus === 'all' ? orders : orders.filter(order => order.status === filterStatus);

        orderList.innerHTML = filteredOrders.map(order => `
                <div class="order-item">
                    <div class="order-info">
                        <span class="order-amount">¥${order.amount}</span>
                        <span class="order-status status-${order.status}">${getStatusText(order.status)}</span>
                    </div>
                    <div style="color: #666; font-size: 14px;">
                        ${order.status === 'success'
            ? `用户 ${order.email} 在 ${order.payTime} 完成订单支付!`
            : `订单创建时间: ${order.createTime}`
        }
                    </div>
                    <div class="order-time">备注：${order.remark || '无'}</div>
                </div>
            `).join('');
    }

    // 获取状态文本
    function getStatusText(status) {
        const statusMap = {
            'success': '支付成功',
            'waiting': '等待支付',
            // 'finished': '交易完结',
            'closed': '交易关闭'
        };
        return statusMap[status] || '未知状态';
    }

    // 二维码弹窗相关变量
    let qrModalTimer = null;
    let qrModalTimeLeft = 120; // 1分钟 = 60秒

    // 显示二维码弹窗
    function showQRModal(order) {
        console.log('显示二维码弹窗', order);
        const modal = document.getElementById('qrModal');
        const amountElement = document.getElementById('qrModalAmount');
        const timerElement = document.getElementById('qrModalTimer');

        if (!modal) {
            console.error('找不到二维码弹窗元素');
            return;
        }

        // 更新金额
        amountElement.textContent = `¥${order.amount.toFixed(2)}`;

        // 显示弹窗
        modal.classList.add('show');
        console.log('弹窗已显示');

        // 重置倒计时
        qrModalTimeLeft = 120;
        updateQRModalTimer();

        // 开始倒计时
        qrModalTimer = setInterval(() => {
            qrModalTimeLeft--;
            updateQRModalTimer();

            if (qrModalTimeLeft <= 0) {
                closeQRModal();
            }
        }, 1000);
    }

    // 更新二维码弹窗倒计时
    function updateQRModalTimer() {
        const timerElement = document.getElementById('qrModalTimer');
        timerElement.textContent = `${qrModalTimeLeft}s`;
    }

    // 关闭二维码弹窗
    function closeQRModal() {
        const modal = document.getElementById('qrModal');
        modal.classList.remove('show');

        // 清除倒计时
        if (qrModalTimer) {
            clearInterval(qrModalTimer);
            qrModalTimer = null;
        }
    }

    // 消息提醒函数
    function showMessage(message, type = 'info', duration = 3000) {
        const container = document.getElementById('messageContainer');
        const messageId = 'message-' + Date.now();

        const icons = {
            success: '✅',
            warning: '⚠️',
            error: '❌',
            info: 'ℹ️'
        };

        const messageHtml = `
                <div class="message-toast ${type}" id="${messageId}">
                    <div class="message-content">
                        <div class="message-icon">${icons[type]}</div>
                        <div class="message-text">${message}</div>
                        <button class="message-close" onclick="closeMessage('${messageId}')">&times;</button>
                    </div>
                </div>
            `;

        container.insertAdjacentHTML('beforeend', messageHtml);

        // 显示动画
        setTimeout(() => {
            const messageElement = document.getElementById(messageId);
            if (messageElement) {
                messageElement.classList.add('show');
            }
        }, 10);

        // 自动关闭
        if (duration > 0) {
            setTimeout(() => {
                closeMessage(messageId);
            }, duration);
        }
    }

    // 关闭消息提醒
    function closeMessage(messageId) {
        const messageElement = document.getElementById(messageId);
        if (messageElement) {
            messageElement.classList.remove('show');
            setTimeout(() => {
                messageElement.remove();
            }, 300);
        }
    }

    // 更新支付信息
    function updatePaymentInfo(order) {
        const paymentAmount = document.getElementById('paymentAmount');
        const paymentStatus = document.getElementById('paymentStatus');

        paymentAmount.textContent = `¥${order.amount.toFixed(2)}`;
        paymentStatus.textContent = `订单状态：等待支付`;

        // 重置倒计时
        // timeLeft = 300;
        // updateCountdown();
    }

    // 等待DOM加载完成后绑定事件
    document.addEventListener('DOMContentLoaded', function() {
        // 表单提交处理
        const orderForm = document.getElementById('orderForm');
        console.log('查找表单元素:', orderForm);

        if (orderForm) {
            const submitBtn = orderForm.querySelector('.submit-btn');
            if (submitBtn) {
                console.log('找到提交按钮，绑定点击事件');
                submitBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const amount = parseFloat(document.getElementById('orderAmount').value);
                    const email = document.getElementById('orderEmail').value;
                    const remark = document.getElementById('orderRemark').value;

                    if (!amount || amount < 0.01) {
                        showMessage('请输入有效的订单金额（至少0.01元）', 'warning');
                        return;
                    }

                    if (!email) {
                        showMessage('请输入邮箱地址', 'warning');
                        return;
                    }

                    // 创建新订单
                    orderNo = Date.now();
                    const newOrder = {
                        id: orderNo,
                        amount: amount,
                        email: email,
                        remark: remark,
                        status: 'waiting',
                        createTime: new Date().toLocaleString('zh-CN'),
                        payTime: null,
                        _token: '{{csrf_token()}}',
                    };

                    //发起ajax 请求到 后台
                    $.ajax({
                        type: 'POST',
                        url: '/api/order',
                        data: newOrder,
                        dataType: 'json',
                        success: function(data) {
                            if(data.status){
                                orders.unshift(newOrder); // 添加到列表开头
                                renderOrders();
                                // 隐藏表单，显示支付信息
                                orderForm.style.display = 'none';
                                document.getElementById('paymentInfo').style.display = 'block';
                                // 更新支付信息
                                updatePaymentInfo(newOrder);
                                // 显示二维码弹窗
                                console.log('准备显示二维码弹窗');

                                $('.qr-modal-qr').html('<img src="'+data.data+'">');
                                $('.qr-code').html('<img src="'+data.data+'">');

                                showQRModal(newOrder);
                                // 显示成功消息
                                showMessage('订单创建成功！请扫码支付', 'success');
                                setInterval(function (){
                                    queryOrder(orderNo)
                                },1000)
                            }else {
                                showMessage(data.msg, 'error');
                            }
                        },
                    })
                });
            } else {
                console.error('找不到提交按钮');
            }
        } else {
            console.error('找不到表单元素');
        }

        // 关闭二维码弹窗按钮
        const closeBtn = document.getElementById('qrModalClose');
        if (closeBtn) {
            closeBtn.addEventListener('click', function() {
                closeQRModal();
            });
        }

        // 点击弹窗背景关闭
        const modal = document.getElementById('qrModal');
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeQRModal();
                }
            });
        }

        // 状态标签切换
        const statusTabs = document.querySelectorAll('.status-tab');
        statusTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                statusTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                const status = this.textContent.trim();
                const statusMap = {
                    '全部': 'all',
                    '支付成功': 'success',
                    '等待支付': 'waiting',
                    // '交易完结': 'finished',
                    '交易关闭': 'closed'
                };

                renderOrders(statusMap[status]);
            });
        });

        // 重新创建订单按钮
        document.addEventListener('click', function(e) {
            if (e.target.id === 'newOrderBtn') {
                // 显示表单，隐藏支付信息
                document.getElementById('orderForm').style.display = 'block';
                document.getElementById('paymentInfo').style.display = 'none';

                // 清空表单
                document.getElementById('orderForm').reset();
            }
        });

        // 初始化渲染
        renderOrders();
    });

    function queryOrder(orderNo){
        $.ajax({
            type: "post",
            url: `/api/alipay/trade-query`,
            data: {
                orderNo: orderNo,
                _token: '{{ csrf_token() }}',
            },
            dataType: "json",
            success: (data) => {
                console.log(data)
                if(data.status){
                   window.location.reload();
                }
            },
            error: () => {
                showMessage('查询订单异常：未知错误，请稍后重试~', 'error');
            }
        });
    };



</script>
</body>
</html>
